import "./style.less";

type Color = "red" | "blue" | "green" | "orange" | "transparent";

export interface FlexProps {
  btColor: Color;
  brColor: Color;
  bbColor: Color;
  blColor: Color;
  borderRadius: number;
  width: number;
  height: number;
}

export const CssTriangle = (props: FlexProps) => {
  const { btColor, brColor, bbColor, blColor, borderRadius, width, height } =
    props;

  return (
    <>
      <div
        style={{
          width: `50px`,
          height: `50px`,
          borderTop: `50px solid ${btColor}`,
          borderRight: `50px solid ${brColor}`,
          borderBottom: `50px solid ${bbColor}`,
          borderLeft: `50px solid ${blColor}`,
          borderRadius: `${borderRadius}px`,
        }}
      ></div>
    </>
  );
};
